
//获取操作对象
var body=document.body
var section=document.querySelector("#section")
var gouwuche=section.querySelector(".gouwuche")
var xuans=document.getElementsByName("xuan")
var quans=document.getElementsByName("quan")
var shuliang=document.querySelector(".shuliang")
var zongjia=document.querySelector(".zongjia")
var box1 = document.querySelectorAll(".big_box1")
var box2 = document.querySelectorAll(".big_box2")
// console.log(box1[0],box2)


// 给body绑定点击事件
body.onclick=function(e){
    // 事件兼容
    var e = e || window.event
    // 对象兼容
    var target=e.target || e.srcElement
    //判断当前点击的是否为加入购物车
    if(target.className=='dd2'){
        // console.log(111)
        //获取当前内容
        var imgurl=target.previousElementSibling.previousElementSibling.lastElementChild.getAttribute("src")
        var title=target.previousElementSibling.firstElementChild.innerHTML
        var price=target.previousElementSibling.firstElementChild.nextElementSibling.lastElementChild.innerHTML
        // console.log(imgurl,title,price)
        //创建商品交接点对象
        var ul=document.createElement("ul")
        //给当前商品添加内容
        ul.innerHTML=`
            <li>
                <input type="checkbox" name="xuan">
            </li>
            <li>
                <img src="${imgurl}" alt="">
                <p>${title}</p>
            </li>
            <li>￥<span>${price}</span></li>
            <li>
            <button>-</button>
            <input type="text" value="1">
            <button>+</button>
            </li>
            <li>￥<span>${price}</span></li>
            <li><span>删除</span></li>
        `
        //给内容中添加商品
        gouwuche.appendChild(ul)
    }
    //判断全选框
    if(target.name=="quan"){
        //遍历所有选中框对象
        for(var i=0;i<xuans.length;i++){
            //判断当前全选框是否被选中
            if(target.checked){
                xuans[i].checked=true
            }else{
                xuans[i].checked=false
            }
        }
        xzk()
        totalnum()
        total()
    }
    //判断当前是否为选中框
    if(target.name=="xuan"){
        xzk()
        totalnum()
        total()
    }

    //判断是否为加号加法计算
    if(target.innerHTML=="+"){
        console.log(111)
        //获取数量
        var num=target.previousElementSibling.value
        num++
        //重新给数量赋值
        target.previousElementSibling.value=num
        //获取结构父节点ul对象
        var ul=target.parentNode.parentNode
        //获取ul对象中子元素节点
        var lis=ul.children
        //获取单价
        var price=lis[2].lastElementChild.innerHTML
        //计算小计
        var xiaoji=num*price
        //重新给小计赋值
        lis[4].lastElementChild.innerHTML=xiaoji.toFixed(2)
        xzk()
        totalnum()
        total()
    }

    //判断当前点击的是否为减号
    if(target.innerHTML=="-"){
        console.log(222)
        //获取数量
        var num=target.nextElementSibling.value
        //判断数量
        if(num<=1){
            num=1
            alert("亲，最低选一件商品哦")
        }else{
            num--
        }
        //重新给数量赋值
        target.nextElementSibling.value=num
        //获取结构父节点ul对象
        var ul=target.parentNode.parentNode
        //获取ul对象中子元素节点
        var lis=ul.children
        //获取单价
        var price=lis[2].lastElementChild.innerHTML
        //计算小计
        var xiaoji=num*price
        //重新给小计赋值
        lis[4].lastElementChild.innerHTML=xiaoji.toFixed(2)
        xzk()
        totalnum()
        total()
    }
    //判断点击的是否为删除
    if(target.innerHTML=="删除"){
        //给定一个确定框
        if(confirm("亲，您确定要删除")){
            target .parentNode.parentNode.remove()
        }
        xzk()
        totalnum()
        total()
    }

    //删除选中的商品
    if(target.innerHTML=="删除选中的商品"){
        //遍历选中框对象
        for(let i=xuans.length-1;i>=0;i--){
            //判断当前选中框是否被选中
            if(xuans[i].checked){
                xuans[i].parentNode.parentNode.remove()
                // if(confirm("亲，您确定要删除选中的商品吗？")){
                //     xuans[i].parentNode.parentNode.remove()
                // }
            }
        }
        //放函数
        xzk()
        totalnum()
        total()
    }
    //右边按钮
    if(target.name=="right"){
        box1[0].style.display = "none"
        box2[0].style.display = "block"
    }
    //左边按钮
    if(target.name=="left"){
        box2[0].style.display = "none"
        box1[0].style.display = "block"
    }
     //右边按钮
     if(target.name=="right1"){
        box1[1].style.display = "none"
        box2[1].style.display = "block"
    }
    //左边按钮
    if(target.name=="left1"){
        box2[1].style.display = "none"
        box1[1].style.display = "block"
    }
   
    //判断当前点击的是否为去结算
    if(target.innerHTML=="去结算"){
        confirm("您已成功付款")
        for(let i=xuans.length-1;i>=0;i--){
            if(xuans[i].checked){
                xuans[i].parentNode.parentNode.remove()
            }
        }
        // confirm("您已成功付款")
        // if(confirm("您已成功付款")){
        //     target.parentNode.parentNode.previousElementSibling.firstElementChild.remove()
        // } 
        xzk()
        totalnum()
        total()
    }
}


//创建选中框函数
function xzk(){
    var m=0//选中框被选中的次数
    //遍历所有选中框对象
    for(var i=0;i<xuans.length;i++){
        //判断当前选中框是否被选中
        if(xuans[i].checked){
            m++
        }
    }
    //判断当前选中框被选中的次数是否等于选中框长度
    if(m==xuans.length  && m!=0){
        //遍历全选框对象
        for(let j=0;j<quans.length;j++){
            quans[j].checked=true
        }
    }else{
        for(let j=0;j<quans.length;j++){
            quans[j].checked=false
        }
    }
}

//封装已选商品数量函数
function totalnum(){
    var num=0//已选商品数量
    //获取所有商品
    var uls=gouwuche.children
    // console.log(uls);
    //遍历每个商品对象
    for(var i=0;i<uls.length;i++){
        //获取当前商品所有子元素节点
        var lis=uls[i].children
        // console.log(lis);
        //判断当前商品是否被选中
        if(lis[0].firstElementChild.checked){
            //获取当前商品数量
            var m=lis[3].firstElementChild.nextElementSibling.value
            //累加被选中的数量
            num+=parseInt(m)
        }
    }
    //给数量的地方赋值
    shuliang.innerHTML=num
}

//封装总价函数
function total(){
    var sum=0 //已选商品总计
    //获取所有商品
    var uls=gouwuche.children
    //遍历每个商品对象
    for(var i=0;i<uls.length;i++){
        //获取当前商品所有的子元素节点
        var lis=uls[i].children
        //判断当前商品是否被选中
        if(lis[0].firstElementChild.checked){
            //获取当前商品的小计
            var m=lis[4].firstElementChild.innerHTML
            //累加小计
            sum+=parseFloat(m)
             
        }
    }
    //重新给总计赋值
    zongjia.innerHTML=sum.toFixed(2)
}